<template>
	<view class="box">
		<block v-for="(item,index) in content" :key="index">
			<view v-if="item.type==='emoji'" class="inputEmojiClass"
				:style="{ backgroundImage: 'url('+item.content.img+')'}">
			</view>
			<view v-if="item.type==='text'" class="inputTextClass">{{item.content}}</view>
		</block>
	</view>
</template>

<script>
	export default {
		props: {
			content: {
				type: Array,
				default: []
			},
		},
		data() {
			return {}
		},
		methods: {}
	}
</script>

<style lang="scss">
	.box {
		position: relative;
		max-width: calc(100vw - 240rpx);
		padding: 10px 20rpx;
		background-color: #ffffff;
		border-radius: 4px;
		box-shadow: 1px 1px 1px 1px #f5f5f5;
		box-sizing: border-box;

		&::after {
			content: "";
			position: absolute;
			top: 14px;
			left: -6px;
			width: 10px;
			height: 10px;
			transform: rotate(45deg);
			background-color: inherit;
		}

		.inputEmojiClass {
			/* position: absolute; */
			width: 42rpx;
			height: 42rpx;
			background-size: cover;
			background-color: transparent;

			font-variant: small-caps;
			margin: 0;
			padding: 0;
			display: inline-flex;
			text-align: center;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			white-space: nowrap;
			position: relative;
			background-size: cover;
			background-position: center;
			vertical-align: middle;
		}

		.inputTextClass {
			font-size: 16px;
			font-variant: small-caps;
			margin: 0;
			padding: 0;
			text-align: center;
			white-space: nowrap;
			position: relative;
			background-size: cover;
			background-position: center;
			vertical-align: middle;

			display: inline-flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
